<script setup>
	import {
		ref
	} from 'vue';

	var message = ref('')
	var multiMsg = ref('')
	var checked = ref(false)

	const checkedNames = ref([])
	const picked = ref('One')

	const selected = ref('')
	const options = ref([{
			text: 'One',
			value: 'A'
		},
		{
			text: 'Two',
			value: 'B'
		},
		{
			text: 'Three',
			value: 'C'
		}
	])

	const mSelected = ref([])
</script>

<template>
	<p>Message is: {{ message }}</p>
	<input v-model="message" placeholder="edit me" />

	<br />

	<span>Multiline message is:</span>
	<p style="white-space: pre-line;">{{ multiMsg }}</p>
	<textarea v-model="multiMsg" placeholder="add multiple lines"></textarea>
	<br />
	<input type="checkbox" id="checkbox" v-model="checked" />
	<label for="checkbox">{{ checked }}</label>
	<div>Checked names: {{ checkedNames }}</div>

	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
	<label for="jack">Jack</label>

	<input type="checkbox" id="john" value="John" v-model="checkedNames" />
	<label for="john">John</label>

	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
	<label for="mike">Mike</label>

	<div>Picked: {{ picked }}</div>

	<input type="radio" id="one" value="One" v-model="picked" />
	<label for="one">One</label>

	<input type="radio" id="two" value="Two" v-model="picked" />
	<label for="two">Two</label>

	<div>Selected: {{ selected }}</div>

	<select v-model="selected">
		<option disabled value="">Please select one</option>
		<option v-for="option in options" :value="option.value">
			{{ option.text }}
		</option>
	</select>

	<div>Selected: {{ mSelected }}</div>

	<select v-model="mSelected" multiple>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
</template>



<style>
</style>